<template>
  <van-tabbar
    class="tabbar"
    v-if="$route.meta.tabbar"
    :value="activeIndex"
    @change="handleChange"
  >
    <van-tabbar-item icon="manager" to="/new-chat" :class="{ current: activeIndex === 0 }">
      <template #icon="props">
        <transition name="ticon">
          <i v-if="props.active" class="iconfont icon-message"></i>
        </transition>
        <transition name="ticon">
          <i v-if="!props.active" class="iconfont icon-message-o"></i>
        </transition>
      </template>
      <span>消息</span>
    </van-tabbar-item>

    <van-tabbar-item :badge="newFriend.length ? newFriend.length : ''" :class="{ current: activeIndex === 1 }" to="/contacts">
      <template #icon="props">
        <transition name="ticon">
          <i v-if="props.active" class="iconfont fs-18 icon-tongxunlu"></i>
        </transition>
        <transition name="ticon">
          <i v-if="!props.active" class="iconfont fs-18 icon-tongxunlu1"></i>
        </transition>
      </template>
      <span>通讯录</span>
    </van-tabbar-item>

    <van-tabbar-item to="/lives" :class="{ current: activeIndex === 2 }">
      <template #icon="props">
        <transition name="ticon">
          <i v-if="props.active" class="iconfont fs-18 icon-zhibo"></i>
        </transition>
        <transition name="ticon">
          <i v-if="!props.active" class="iconfont fs-18 icon-zhibo-o"></i>
        </transition>
      </template>
      <span>直播间</span>
    </van-tabbar-item>

    <van-tabbar-item icon="manager" to="/account" :class="{ current: activeIndex === 3 }">
      <template #icon="props">
        <transition name="ticon">
          <i v-if="props.active" class="iconfont icon-account"></i>
        </transition>
        <transition name="ticon">
          <i v-if="!props.active" class="iconfont icon-account-o"></i>
        </transition>
      </template>
      <span>我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem, Popup } from 'vant'

Vue.use(Tabbar).use(TabbarItem).use(Popup)

export default {
  data() {
    return {
      activeIndex: 0,
      translate: 'fade',
      mapIndex: {
        'new-chat': 0,
        contacts: 1,
        lives: 2,
        account: 3
      }
    }
  },
  computed: {
    newFriend() {
      return this.$store.state.ch.newFriend.filter(el => !el.is_read)
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.activeIndex = this.mapIndex[this.$route.name]
      },
      immediate: true
    }
  },
  methods: {
    handleChange(index) {
      console.log(index)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/styles/vars.less';
.tabbar {
  /deep/ .van-tabbar-item {
    color: #888;
  }
  /deep/ .van-tabbar-item--active {
    color: @color-primary;
  }
}

.fs-18 {
  font-size: 22px !important;
}

.tabbar {
  z-index: 25;
  border-top: 1px solid #f5f5f5;
  font-size: 10px;
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
  &::after {
    border: 0;
  }
  .iconfont {
    font-size: 20px;
  }
  /deep/ .van-tabbar-item__text {
    transform: scale(0.8);
  }
  /deep/ .van-tabbar-item__icon {
    height: 21px;
    width: 21px;
    .iconfont {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

.current {
  .ticon-enter-active {
    transition: all 0.8s ease;
  }

  .ticon-leave-active {
    transition: all 0s ease;
  }

  .ticon-enter,
  .ticon-leave-to {
    opacity: 0;
    // transform: rotate(360deg) scale(0);
    transform: translateY(20px) scale(0.4);
  }

}
</style>
